<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>访客信息录入</title>
    <base href="<%=basePath%>"><!-- jsp文件头和头部 -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <style>
        .layui-footer{padding:10px 0;text-align:center;box-shadow:0 -1px 2px 0 rgba(0,0,0,.05)}
    </style>
</head>
<style type="text/css">
.layui-form-label{
    text-align:left;
}
</style>
<body style="background-color:#f7f7f7 ">

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">访客登记表单</div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>访客信息登记</legend>
                </fieldset>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="vname" lay-verify="required"placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">来访时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="vtime" id="date" lay-verify="date|required"placeholder="YYYY-MM-DD" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="vdept" lay-verify="required" autocomplete="off" placeholder="请输入您的工作单位" class="layui-input">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>受访人信息登记</legend>
                </fieldset>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sname" lay-verify="required"placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="stel"  lay-verify="phone|required"placeholder="请输入手机号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
<%--                <div class="layui-form-item">--%>
<%--                    <label class="layui-form-label">工号</label>--%>
<%--                    <div class="layui-input-block">--%>
<%--                        <input type="number" name="userid" lay-verify="required|userid" placeholder="请输入工号" autocomplete="off" class="layui-input">--%>
<%--                    </div>--%>
<%--                </div>--%>
                <div class="layui-form-item">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-block">
                        <input type="text" name="sdept" lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">来访事由</label>
                    <div class="layui-input-block">
                        <textarea name="vtext" placeholder="请输入内容" lay-verify="required|textarea" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div>
                        <div class="layui-footer" style="left: 0;">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="static/ehome/js/jquery-1.8.3.min.js"></script>
<script src="static/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
        });
        //自定义表单验证规则
        form.verify({
            textarea: function (value){
                if (value.length < 6){
                    return '来访事由不少于6个字'
                }
            }
            ,userid:[
                /^[\S]{9}$/
                ,'工号必须9位，且不能出现空格'
            ]
        });

        /* 监听提交 */
        form.on('submit(demo1)', function(data){
            let indexload = "";
            $.ajax({
                url:'<%=basePath%>visitor/savevisitor.do',
                type:'post',
                dataType:'json',
                contentType: "application/json; charset=utf-8",
                cache: false,
                data:JSON.stringify(data),
                beforeSend: function () {
                    indexload = layer.load(1, {
                        shade: [0.1, '#fff']
                    });
                },
                complete: function () {
                    layer.close(indexload);
                },
                success:function(data){
                    if (data.code == 0) {
                        layer.alert(data.msg, {icon: 6}, function (index) {
                            layer.close(index);
                            location.reload();
                        });
                    } else {
                        layer.alert(data.msg, {icon: 5}, function (index) {
                            layer.close(index);
                            location.reload();
                        });

                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
